<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>当前用户：{{userInfo.nickName}}</span>
            <span style="float:right">
              <!-- <img src="../assets/logo/login-logo.png" width="100px"> -->
            </span>
          </div>
          <div class="body">
            <el-calendar v-model="value">
              <template slot="dateCell" slot-scope="{ date, data }">
                <div class="date-content">
                  <span class="text">{{ getDay(date) }}</span>
                  <span v-if="isWeek(date)" class="rest">休</span>
                </div>
              </template>
            </el-calendar>
          </div>
        </el-card>
      </el-col>
      <!-- 我的 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="7">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>我的应用</span>
          </div>
          <div class="body">
            <el-row>
              <el-col :span="12" align="center">
                <div class="app">
                  <el-row>
                    <el-col :span="11">
                      <img src="../assets/logo/icon2.png" width="50px" style="display:inline-block">
                    </el-col>
                    <el-col :span="12">
                      <div class="text" @click="look(0)">我的专利</div>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
              <el-col :span="12" align="center">
                <div class="app">
                  <el-row>
                    <el-col :span="11">
                      <img src="../assets/logo/icon3.png" width="50px" style="display:inline-block">
                    </el-col>
                    <el-col :span="12">
                      <div class="text" @click="look(1)">查看分数</div>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
      <!-- 数据展示 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="9">
        <el-card class=" update-log">
          <div slot="header" class="clearfix">
            <span>服务信息</span>
            <span style="float:right">
              <div v-if="server.jvm">在线时长：{{ server.jvm    .runTime }}</div>
            </span>
          </div>
          <div class="body">
            <div v-if="server.sys">服务器名称：{{ server.sys.computerName }}</div>
            <hr>
            <div v-if="server.sys">我的IP地址： {{ server.sys.computerIp }}</div>
          </div>
        </el-card>
      </el-col>
      <!-- 数据 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="16">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="12" :lg="24" class="hidden-md-and-down">
            <el-card style="margin-top:25px;">
              <div slot="header" class="clearfix">
                <span>通知公告</span>
              </div>
              <div class="body">
                <el-table :data="message" stripe style="width: 100%" size="mini">
                  <el-table-column prop="noticeTitle" label="公告内容">
                  </el-table-column>
                  <el-table-column prop="createTime" label="时间" :formatter="dateFormat" width="100px">
                  </el-table-column>
                </el-table>
                <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize" @pagination="getMessage" />
              </div>
            </el-card>
          </el-col>
        </el-row>

      </el-col>

    </el-row>
  </div>
</template>

<script>
import { getServer } from "@/api/monitor/server";
import { getUserProfile } from '@/api/system/user'
import { listNotice } from "@/api/system/notice";
import PieChart from './dashboard/PieChart.vue'
import LineChart from './dashboard/LineChart.vue';
import 'element-ui/lib/theme-chalk/display.css';
import moment from "moment";
export default {
  name: "Index",
  components: { LineChart, PieChart },
  data () {
    return {
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        noticeTitle: undefined,
        createBy: undefined,
        status: undefined
      },
      userInfo: {},
      // 服务器信息
      server: [],
      message: [],
      value: new Date(),

    };
  },
  created () {
    this.getList()
    this.getMessage()
    getUserProfile().then(res => {

      this.userInfo = res.data
    })
  },
  methods: {
    look (index) {
      if (index == 0) {
        this.$router.push('/project/project_mine')
      } else {
        this.$router.push('/project/result_mine')
      }
    },
    /** 查询服务器信息 */
    getList () {
      getServer().then(response => {
        this.server = response.data;
        // this.$modal.closeLoading();
      });
    },
    //时间格式化
    dateFormat: function (row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD");
    },
    getMessage () {
      listNotice(this.queryParams).then(res => {
        this.total = res.total;
        this.message = res.rows
      })
    },
    goTarget (href) {
      window.open(href, "_blank");
    },
    handleSetLineChartData (type) {
      this.lineChartData = lineChartData[type]
    },
    // 标注今天日期
    getDay (date) {
      return date.getDate()
    },
    // 判断是否周六日
    isWeek (date) {
      return date.getDay() === 6 || date.getDay() === 0
    },


  },
};
</script>

<style scoped lang="scss">
.app {
  line-height: 50px;
  text-align: center;
  height: 50px;
  width: 120px;
  border: 1px #ffffff solid;
  box-shadow: #00000060 1px 1px 3px 1px;
  border-radius: 5px;
  cursor: pointer;
  .text {
    font-size: 14px;
    font-weight: 600;
  }
}
.app:hover {
  box-shadow: #409eff 1px 1px 3px 1px;
}
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 15px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
.app-container {
  background-color: rgba(243, 243, 243, 0.829);
}
.select-box {
  display: flex;
  justify-content: flex-end;
}

::v-deep .el-calendar-day {
  height: auto;
}
::v-deep
  .el-calendar-table__row
  td::v-deep
  .el-calendar-table
  tr
  td:first-child,
::v-deep .el-calendar-table__row td.prev {
  border: none;
}
.date-content {
  height: 40px;
  text-align: center;
  //   line-height: 40px;
  font-size: 14px;
}
.date-content .rest {
  color: #fff;
  border-radius: 50%;
  background: rgb(250, 124, 77);
  width: 20px;
  height: 20px;
  line-height: 20px;
  display: inline-block;
  font-size: 12px;
  margin-left: 10px;
}
.date-content .text {
  width: 20px;
  height: 20px;
  line-height: 20px;
  display: inline-block;
}
::v-deep .el-calendar-table td.is-selected .text {
  background: #409eff;
  color: #fff;
  border-radius: 50%;
}
</style>

